<template>
  <div>
    <!-- 车辆视频 -->
    <el-drawer
      :visible.sync="visible"
      title="车载视频"
      direction="rtl"
    >
      <div class="popups-info">
        <el-tabs v-model="activeName">
          <el-tab-pane label="车辆实时监控" name="first">
            <current-time :type="1" />
          </el-tab-pane>
          <el-tab-pane label="车辆监控回放" name="second">
            <play-back :type="2" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset">关闭</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import currentTime from './currentTime'
  import playBack from './playBack'
  export default {
    name: 'vehicleVideo',
    components: {
      currentTime, playBack
    },
    data() {
      return {
        visible: false,
        activeName: 'first'
      }
    },
    created() {

    },
    methods: {
      async open(temp, isTy) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      reset() {
        this.visible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-drawer {
  width: 80% !important;
}
/deep/.el-drawer__header {
  color: #303133;
}
/deep/.el-collapse-item__header {
  font-size: 16px;
  color: #38BDBD;
}
.popups-info {
  height: 100%;
  padding: 0 30px;
}
</style>
